<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>档案列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .row > ul > li{
            text-align: center;
        }
        .row > ul > li:hover{
            background: #169ed8;
        }
        .record{
            border: 1px solid black;
        }
        .recordList{
            margin: 30px 0 0 0;
        }
    </style>
</head>
<body>
<div class="row">
    <ul class="col-2 nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath}/open/shotBlogs">随拍</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath}/open/records">档案</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath}/open/shotBlog/add">发布</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath}/home">个人用户</a>
        </li>
    </ul>
    <div class="col-10">
        <div> <strong>河大喵鉴</strong>对本校猫猫进行<span>编辑、搜索</span>等管理</div>
        <div class="col-6 offset-3">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="搜索">
                <span class="input-group-text">搜索</span>
            </div>
        </div>
        <div class="recordList col-10">
            <c:choose>
                <c:when test="${recordList.size()>0}">
                    <c:forEach var="record" items="${recordList}">
                        <div class="record flex-row" onclick="toDetails(${record.catId})">
                            <c:choose>
                                <c:when test="${record.images.size()>0}">
                                    <img src="${pageContext.request.contextPath}/img_res/${record.images.get(0)}" width="80" height="80" alt="">
                                </c:when>
                                <c:otherwise>
                                    <img src="" width="80" height="80" alt="">
                                </c:otherwise>
                            </c:choose>
                            <span>
                                姓名: ${record.name} 昵称: ${record.nickname} 性别: ${record.gender} 家庭地址: ${record.home} 描述: ${record.description}
                            </span>
                        </div>
                    </c:forEach>
                </c:when>
                <c:otherwise>
                    没有查询到数据
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>
<script>
    function toDetails(id) {
        // console.log("click me")
        $(location).attr("href",'${pageContext.request.contextPath}/open/record/'+id)
    }
</script>
</body>
</html>